<template>
  <div class="user safe-width">
    <div class="user-info ">
      <div class="user-info-bg">
        <img src="../../../../static/bg.png"/>
        <div class="user-info-bg-change-btn">
          <svg viewBox="0 0 20 12" class="Icon Icon--camera Icon--left" width="14" height="16" aria-hidden="true"
               style="height: 16px; width: 14px;"><title></title>
            <g>
              <path
                d="M18.094 2H15s-1-2-2-2H7C6 0 5 2 5 2H2C0 2 0 3.967 0 3.967V14c0 2 2.036 2 2.036 2H17c3 0 3-1.983 3-1.983V4c0-2-1.906-2-1.906-2zM10 12c-1.933 0-3.5-1.567-3.5-3.5S8.067 5 10 5s3.5 1.567 3.5 3.5S11.933 12 10 12zm0 1.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm7.5-8c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1z"
                fill-rule="evenodd"></path>
            </g>
          </svg>
          编辑封面图片
        </div>
      </div>
      <div class="user-info-content">
        <div class="user-avatar" @mouseenter="isShowChangeAvatar = true" @mouseleave="isShowChangeAvatar = false">
          <img :src="userAssign.avatar"/>
          <div class="user-avatar-change-btn" v-if="isShowChangeAvatar" @click="openCroppr">
            <svg class="Zi Zi--Camera UserAvatarEditor-cameraIcon" fill="currentColor" viewBox="0 0 24 24" width="36"
                 height="36">
              <path
                d="M20.094 6S22 6 22 8v10.017S22 20 19 20H4.036S2 20 2 18V7.967S2 6 4 6h3s1-2 2-2h6c1 0 2 2 2 2h3.094zM12 16a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0 1.5a5 5 0 1 0-.001-10.001A5 5 0 0 0 12 17.5zm7.5-8a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
                fill-rule="evenodd"></path>
            </svg>
            <p>修改我的头像</p>
          </div>
        </div>
        <div class="users-all-info">
          <p class="user-name">
            {{users.username? users.username : '请补全用户名称' }}
            <span style="margin-left: 10px;">
	              {{users.abstract? users.abstract : '请补全用户信息'}}
	            </span>
          </p>
          <p class="user-intro" style="color: #8590a6;">
            {{users.apartment? users.apartment : '请补全用户介绍'}}
          </p>
        </div>
      </div>
    </div>
    <div class="userinfo-content">
      <el-form ref="form" :model="userAssign" label-width="120px">

        <div class="userinfo-content-item userinfo-name" @mouseenter="enterHandler('username')"
             @mouseleave="leaveHandler">
          <el-form-item label="用戶名:">
            <div class="openArea" v-if="opentag === 'username'">
              <div class="openArea-input">
                <div class="openArea-input-con">
                  <el-input v-model="userAssign.username"></el-input>
                </div>
                <div class="openArea-input-btn">
                  <el-button type="primary">修改</el-button>
                  <el-button type="danger" plain @click="closeHandler">返回</el-button>
                </div>
              </div>
            </div>
            <div class="closeArea" v-else>
              {{userAssign.username ? userAssign.username : '請补全用戶名'}}
              <i v-if="focustag === 'username'" @click="openHandler('username')">
                <svg viewBox="0 0 12 12" class="Icon ModifyButton-icon Icon--modify" width="12" height="16"
                     aria-hidden="true" style="height: 16px; width: 12px;">
                  <title></title>
                  <g>
                    <path
                      d="M.423 10.32L0 12l1.667-.474 1.55-.44-2.4-2.33-.394 1.564zM10.153.233c-.327-.318-.85-.31-1.17.018l-.793.817 2.49 2.414.792-.814c.318-.328.312-.852-.017-1.17l-1.3-1.263zM3.84 10.536L1.35 8.122l6.265-6.46 2.49 2.414-6.265 6.46z"
                      fill-rule="evenodd">
                    </path>
                  </g>
                </svg>
              </i>
            </div>
          </el-form-item>
        </div>

        <div class="userinfo-content-item userinfo-telephone" @mouseenter="enterHandler('telephone')"
             @mouseleave="leaveHandler">
          <el-form-item label="手机号码:">
            <div class="openArea" v-if="opentag === 'telephone'">
              <div class="openArea-input">
                <div class="openArea-input-con">
                  <el-input v-model="userAssign.telephone"></el-input>
                </div>
                <div class="openArea-input-btn">
                  <el-button type="primary">修改</el-button>
                  <el-button type="danger" plain @click="closeHandler">返回</el-button>
                </div>
              </div>
            </div>
            <div class="closeArea" v-else>
              {{userAssign.telephone ? userAssign.telephone : '請补全用戶名'}}
              <i v-if="focustag === 'telephone'" @click="openHandler('telephone')">
                <svg viewBox="0 0 12 12" class="Icon ModifyButton-icon Icon--modify" width="12" height="16"
                     aria-hidden="true" style="height: 16px; width: 12px;">
                  <title></title>
                  <g>
                    <path
                      d="M.423 10.32L0 12l1.667-.474 1.55-.44-2.4-2.33-.394 1.564zM10.153.233c-.327-.318-.85-.31-1.17.018l-.793.817 2.49 2.414.792-.814c.318-.328.312-.852-.017-1.17l-1.3-1.263zM3.84 10.536L1.35 8.122l6.265-6.46 2.49 2.414-6.265 6.46z"
                      fill-rule="evenodd">
                    </path>
                  </g>
                </svg>
              </i>
            </div>
          </el-form-item>
        </div>

        <div class="userinfo-content-item userinfo-abstract" @mouseenter="enterHandler('abstract')"
             @mouseleave="leaveHandler">
          <el-form-item label="个人简介:">
            <div class="openArea" v-if="opentag === 'abstract'">
              <div class="openArea-input">
                <div class="openArea-input-con">
                  <el-input v-model="userAssign.abstract"></el-input>
                </div>
                <div class="openArea-input-btn">
                  <el-button type="primary">修改</el-button>
                  <el-button type="danger" plain @click="closeHandler">返回</el-button>
                </div>
              </div>
            </div>
            <div class="closeArea" v-else>
              {{userAssign.abstract ? userAssign.abstract : '什么都还没有介绍'}}
              <i v-if="!userAssign.abstract || focustag === 'abstract'" @click="openHandler('abstract')">
                <svg viewBox="0 0 12 12" class="Icon ModifyButton-icon Icon--modify" width="12" height="16"
                     aria-hidden="true" style="height: 16px; width: 12px;">
                  <title></title>
                  <g>
                    <path
                      d="M.423 10.32L0 12l1.667-.474 1.55-.44-2.4-2.33-.394 1.564zM10.153.233c-.327-.318-.85-.31-1.17.018l-.793.817 2.49 2.414.792-.814c.318-.328.312-.852-.017-1.17l-1.3-1.263zM3.84 10.536L1.35 8.122l6.265-6.46 2.49 2.414-6.265 6.46z"
                      fill-rule="evenodd">
                    </path>
                  </g>
                </svg>
              </i>
            </div>
          </el-form-item>
        </div>

        <div class="userinfo-content-item userinfo-apartment" @mouseenter="enterHandler('apartment')"
             @mouseleave="leaveHandler">
          <el-form-item label="一句话介绍:">
            <div class="openArea" v-if="opentag === 'apartment'">
              <div class="openArea-input">
                <div class="openArea-input-con">
                  <el-input v-model="userAssign.apartment"></el-input>
                </div>
                <div class="openArea-input-btn">
                  <el-button type="primary">修改</el-button>
                  <el-button type="danger" plain @click="closeHandler">返回</el-button>
                </div>
              </div>
            </div>
            <div class="closeArea" v-else>
              {{userAssign.apartment ? userAssign.apartment : '什么都还没有介绍'}}
              <i v-if="!userAssign.apartment || focustag === 'apartment'" @click="openHandler('apartment')">
                <svg viewBox="0 0 12 12" class="Icon ModifyButton-icon Icon--modify" width="12" height="16"
                     aria-hidden="true" style="height: 16px; width: 12px;">
                  <title></title>
                  <g>
                    <path
                      d="M.423 10.32L0 12l1.667-.474 1.55-.44-2.4-2.33-.394 1.564zM10.153.233c-.327-.318-.85-.31-1.17.018l-.793.817 2.49 2.414.792-.814c.318-.328.312-.852-.017-1.17l-1.3-1.263zM3.84 10.536L1.35 8.122l6.265-6.46 2.49 2.414-6.265 6.46z"
                      fill-rule="evenodd">
                    </path>
                  </g>
                </svg>
              </i>
            </div>
          </el-form-item>
        </div>

        <div class="userinfo-content-item userinfo-createtime">
          <el-form-item label="创建时间:">
            {{userAssign.create_time}}
          </el-form-item>
        </div>

      </el-form>
    </div>
    <croppr :upFileVisible="upFileVisible" @_submitUpFile="_submitUpFile" @_cancelsUpFile="_cancelsUpFile"></croppr>
  </div>
</template>
<script>
import {mapActions, mapGetters} from 'vuex'
import store from '@/store'
import croppr from 'comp/croppr'
export default {
  name: 'user-info',
  components: {
    croppr
  },
  data() {
    return {
      isShowChangeAvatar: false,
      userAssign: {},
      username: {
        username: ''
      },
      focustag: '',
      opentag: '',
      upFileVisible: false
    }
  },
  computed: {
    ...mapGetters(['users'])
  },
  mounted() {
    this.userAssign = Object.assign({}, store.getters.users)
  },
  methods: {
    openCroppr () {
      this.upFileVisible = true
    },
    _submitUpFile (val) {
      this.upFileVisible = false
    },
    _cancelsUpFile (val) {
      this.upFileVisible = false
    },
    enterHandler(par) {
      this.focustag = par
    },
    leaveHandler() {
      this.focustag = ''
    },
    openHandler(par) {
      this.opentag = par
    },
    closeHandler() {
      this.opentag = ''
    }
  }
}
</script>
<style lang="less" scoped>
  .user {
    overflow: hidden;
  }

  .openArea-input {
    width: 80%;
    margin-left: 40px;
    .openArea-input-con {

    }
    .openArea-input-btn {
      text-align: left;
      margin-top: 25px;
    }
  }

  .change-into-btn {
    cursor: pointer;
    position: absolute;
    bottom: 15px;
    right: 10px;
    padding: 7px;
    border: 1px solid #0084ff;
    color: #0084ff;
    border-radius: 3px;
  }

  .user-aside {
    width: 24%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    .user-focus {
      display: flex;
      flex-direction: row;
      flex: 1;
      box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
      & > div {
        width: 50%;
        text-align: center;
        background: #ffffff;
        padding: 7px 0;
        .user-focus-title {
          font-size: 14px;
          line-height: 22px;
          color: #1b1b1b;
        }
        .user-focus-content {
          font-size: 18px;
          margin-top: 10px;
          color: #1b1b1b;
        }
      }
      div:hover {
        cursor: pointer;
        p {
          color: #175199 !important;
        }
      }
      .user-on-focus {
        box-sizing: border-box;
        border-right: 1px solid #ebebeb;
      }
    }
    .focus-list {
      li {
        cursor: pointer;
        color: #646464;
        padding: 17px 10px;
        border-bottom: 1px solid #ebebeb;
        overflow: hidden;
        span {
          float: left;
        }
        em {
          float: right;
        }
      }
      li:hover {
        color: #175199;
      }
    }
  }

  .user-main {
    box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    padding: 20px;
    background: #ffffff;
    width: 74%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .user-info {
    background: #ffffff;

    .user-info-bg {
      z-index: 0;
      width: 100%;
      height: 240px;
      overflow: hidden;
      position: relative;
      .user-info-bg-change-btn {
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: 10px;
        padding: 8px;
        border: 1px solid rgba(26, 26, 26, .6);
        color: rgba(26, 26, 26, .6);
        border-radius: 3px;
        svg {
          fill: rgba(26, 26, 26, .6);
        }
      }
      img {
        width: 100%;
        margin-top: -60px;
      }
    }
    .user-info-content {
      z-index: 1;
      height: 94px;
      padding-bottom: 20px;
      position: relative;
      .user-avatar {
        background: #ffffff;
        width: 168px;
        height: 168px;
        position: absolute;
        top: -74px;
        left: 40px;
        border: 4px solid rgba(255, 255, 255, 0.8);
        border-radius: 4px;
        img {
          width: 100%;
          height: 100%;
          border: none;
        }
        .user-avatar-change-btn {
          cursor: pointer;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, .4);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #ffffff;
          svg {
            fill: #ffffff;
          }
        }
      }
      .users-all-info {
        padding-left: 228px;
        .user-name {
          font-size: 26px;
          line-height: 55px;
          font-weight: 600;
          span {
            font-size: 19px;
            line-height: 28px;
            font-weight: 400;
          }
        }
        .user-intro {
          font-size: 14px;
          line-height: 40px;
        }
      }
    }
  }

  .userinfo-content {
    padding-left: 215px;
    padding-right: 20px;
    background: #ffffff;
  }

  .userinfo-content-item {
    padding: 35px 40px 35px 10px;
    border-bottom: 1px solid #eee;
    background: #ffffff;
    i {
      cursor: pointer;
      margin-left: 20px;
      svg {
        vertical-align: -2px;
        fill: #175199;
      }

    }
  }

  .el-form-item {
    label {
      font-weight: 900 !important;
    }
  }
</style>
